<template>
	<view style="background-color: #f7f7f7;">
		<!-- 顶部蓝色背景 -->
		<view class="topimage">
			<!-- 顶部栏 -->
			<view class="title">
				<image src="../../../static/车联网服务-08我的-05我的车辆添加_slices/箭头.png" @click="back"></image>
				<view style="margin-left: 250rpx;">我的车辆</view>
			</view>
		</view>
		<!-- 主体部分 -->
		<view class="zhuti">
			<view class="xunhuan" v-for="(item,index) in xiaoXiList" :key="index">
				<view class = "neibu1">
					<text class="text1">{{item.messageName}}</text>
					<text class="text2">{{item.time}}</text>
				</view>
				<view class="text3">{{item.messageDetails}}</view>
				<view class="underline" v-if="index !== xiaoXiList.length - 1"></view>
			</view>
		</view>
	</view>
</template>

<script>
import request from 'utils/api.js'
	export default {
		data() {
			return {
				xiaoXiList:[
					{
						messageName:"支付成功通知",
						time:"2023.3.11 11:09",
						messageDetails:"您已成功支付56.9元"
					},
					{
						messageName:"支付成功通知",
						time:"2023.3.11 11:09",
						messageDetails:"您已成功支付56.9元"
					},
					{
						messageName:"支付成功通知",
						time:"2023.3.11 11:09",
						messageDetails:"您已成功支付56.9元"
					}
				]
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					url:'/pages/index_01/index_01'
					})
				},		
														
//获取用户消费信息
		 	async priceAll(){
				const res = await request({
					url:`/order/priceAll?id=${this.id}`
				});
				this.xiaoXiList=res; 	
				console.log(this.xiaoXiList);
			},
		  },
		  mounted() {
		    // this.fetchXiaoXiList(); // 页面加载时获取数据
		  },
		  onShow() {
			  console.log(this.xiaoXiList); //打印数据结构
		  }
	}
</script>

<style lang="scss">
	.title {
		
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 300rpx;
		display: flex;
		padding: 60rpx 300rpx 40rpx 30rpx;
		justify-content: space-between;
	
		image {
			color: white;
			width: 35rpx;
			height: 35rpx;
		}
	
		view {
			color: white;
		}
	}
	
	
	
	
	.topimage{
		display: flex;
		width: 100%;
		height: 430rpx;
		background-color: #3183fc;
	}
	// .topLan{
	// 	width: 100%;
	// 	display: flex;
	// 	position: absolute;
	// 	top: 60rpx;
	// 	justify-content: center;
	// 	align-items: center;
	// }
	// .left{
		
	// 	position: absolute;
	// 	left: 10rpx;	
	// }
	
	.zhuti{
		background-color: white;
		width: 90%;
		margin: 0 auto;
		margin-top: -280rpx;
		text-align: center;
		border-radius: 10px;
		padding-bottom: 16rpx;
		padding-top: 36rpx;
		padding-bottom: 36rpx;
	}
	.xunhuan{
		width: 92%;
		text-align: left;
		margin: 0 auto;
		position: relative;
	}
	
	.text1{
		font-size: 15px;
	}
	.text2{
		position: absolute;
		right: 0rpx;
		top: 8rpx;
		font-size: 12px;
		color: #bdbdbd;
	}
	.text3{
		margin-top: 18rpx;
		font-size: 14px;
	}
	.underline{
		border-bottom: 5px solid #f7f7f7;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	
</style>
